<template>
  <div v-bind="detail.attrs">
    <el-descriptions v-bind="detail['descriptions-attrs']">
      <template v-for="field of fields" :key="field.id">
        <el-descriptions-item
          :label="field['field-label']"
          v-bind="field['descriptions-item-attrs']"
        >
          <el-text v-if="field['field-type'] === 'text'" v-bind="field.attrs">
            {{ detail.model[field.model] }}
          </el-text>
          <el-avatar
            v-else-if="field['field-type'] === 'avatar'"
            class="align-bottom"
            :src="detail.model[field.model]"
            v-bind="field.attrs"
          />
          <el-image
            v-else-if="field['field-type'] === 'image'"
            :src="detail.model[field.model]"
            v-bind="field.attrs"
          />
          <el-link v-else-if="field['field-type'] === 'link'" v-bind="field.attrs">
            {{ detail.model[field.model] }}
          </el-link>
          <el-tag v-else-if="field['field-type'] === 'tag'" v-bind="field.attrs">
            {{ detail.model[field.model] }}
          </el-tag>
          <el-progress
            v-else-if="field['field-type'] === 'progress'"
            :percentage="detail.model[field.model]"
            v-bind="field.attrs"
          />
          <el-badge
            v-else-if="field['field-type'] === 'badge'"
            :value="detail.model[field.model]"
            v-bind="field.attrs"
          >
            {{ field.text }}
          </el-badge>
          <el-timeline v-else-if="field['field-type'] === 'timeline'">
            <el-timeline-item
              v-bind="field.attrs"
              v-for="{ id, timestamp, content } in detail.model[field.model]"
              :key="id"
              :timestamp="timestamp"
            >
              {{ content }}
            </el-timeline-item>
          </el-timeline>
          <el-tree v-else-if="field['field-type'] === 'tree'" :data="detail.model[field.model]" />
          <el-statistic
            v-else-if="field['field-type'] === 'statistic'"
            v-bind="field.attrs"
            :value="detail.model[field.model]"
          />
          <el-countdown
            v-else-if="field['field-type'] === 'countdown'"
            v-bind="field.attrs"
            :value="detail.model[field.model]"
          />
          <el-table
            v-else-if="field['field-type'] === 'table'"
            :data="detail.model[field.model]"
            v-bind="field.table.attrs"
          >
            <el-table-column type="index" label="#" />
            <el-table-column
              v-for="column of field.columns"
              :key="column.id"
              v-bind="column.attrs"
            />
          </el-table>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
interface Props {
  fields: DetailGlobalFields
  detail: DetailGlobal
}

defineProps<Props>()
</script>

<style scoped lang="scss"></style>
